<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定-基础用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .Style{
            color: #2e2e;
            background-color: lightpink;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <p>你输入的内容是: <span :class="{Style:xianshi}">{{message}}</span></p>
    <hr>
    <textarea name="" id="" cols="20" rows="3" v-model="txtMsg"></textarea>
    <p style="white-space: pre-line;">{{ txtMsg }}</p>
    <hr>
    <!--复选框-->
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox"> {{checked}}</label>
    <hr>
    <!--多个复选框，绑定到同一个数组,获取数组内的值-->
    <input type="checkbox" id="Name1" value="李白" v-model="checkName">
    <label for="Name1">李白</label>
    <input type="checkbox" id="Name2" value="李商隐" v-model="checkName">
    <label for="Name2"> 李商隐</label>
    <input type="checkbox" id="Name3" value="杜甫" v-model="checkName">
    <label for="Name3"> 杜甫</label>
    <br>
    <!--checkName.join(',')数组转换成串，进行处理-->

    <span>Checked names: {{ checkName.join(',') }}</span>
    <hr>
    <!--单选按钮-->
    <h3>单选按钮</h3>
    <input type="radio" name="r1" id="r1" value="男" v-model="sel">
    <label for="r1">男</label>

    <input type="radio" name="r2" id="r2" value="女" v-model="sel">
    <label for="r2">女</label>
    <span>选择的 性别: {{ sel }}</span>
    <hr>
    <h3>选择框-单选时：</h3>
    <select name="" id="s" v-model="s">
        <option value="" disabled >辽宁省：</option>
        <option value="大连市">大连市</option>
        <option value="盘锦市">盘锦市</option>
        <option value="沈阳市">沈阳市</option>

    </select>
    <span>选择的 是: {{ s }}</span>
    <hr>
    <h3>选择框-多选时：</h3>

    <select v-model="multipled" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <br>
    <span>Selected: {{ multipled }}</span>
    <hr>
    <!--不是每次输入都显示-->
    <input type="text" v-model.lazy="m1">
    <p>你输入的内容是: <span :class="{Style:xianshi}">{{m1}}</span></p>
    <hr>
    <h3>.number--如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符</h3>
    <input v-model.number="age" type="number">
    <p>你输入的内容是: <span :class="{Style:xianshi}">{{age}}</span></p>
    <h3>.trim</h3>
    <input v-model.trim="age">
    <p>你输入的内容是: <span :class="{Style:xianshi}">{{age}}</span></p>
</div>


<script>
    var app= new Vue({
        el:'#app',
        data:{
            message:'',
            xianshi:true,
            txtMsg:'多行文本',
            checked:true,//v-model：checked==true，复选框默认为选中状态,
            checkName:["李白"],//默认选中一个
            sel:'男',
            s:'',
            multipled:["A","B"],
            m1:'',
            age:'',

        },
        methods:{

        }
    })
</script>
</body>
</html>
